import { connect } from 'umi';
import { Modal, Form } from 'antd';
import ProForm, { ProFormText } from '@ant-design/pro-form';
import {SystemDutyTreeSelect} from '@/components/system/duty'

const SystemDutyForm = (props) => {
  const {
    SystemDutyModel: { formVisible, formType, duty },
    dispatch,
  } = props;

  const [form] = Form.useForm();

  const onCancel = () => {
    dispatch({ type: 'SystemDutyModel/changeFormVisibleReducer', payload: false });
  };

  const okHandle = async () => {
    const fieldsValue = await form.validateFields();
    const formValue = { ...duty, ...fieldsValue };

    if (formType === 'raise') {
      await dispatch({ type: 'SystemDutyModel/saveEffect', payload: formValue });
    }
    
    if (formType === 'modify') {
      await dispatch({ type: 'SystemDutyModel/updateEffect', payload: formValue });
    }

    dispatch({ type: 'SystemDutyModel/listTreeEffect' });
    onCancel();
  }
 
  return (
    <Modal
      destroyOnClose
      title={formType === 'raise' ? '新增职务信息' : '修改职务信息'}
      visible={formVisible}
      onOk={okHandle}
      onCancel={onCancel}
    >
      <ProForm 
        initialValues={duty} form={form} submitter={false}
        layout={'horizontal'} labelCol= { {span: 4} } wrapperCol= { {span: 20} }
      >
        <Form.Item label="上级职务" name="parentId" >
          <SystemDutyTreeSelect disabledKey={duty.id}/>
        </Form.Item>
        <ProFormText  name="code" label="职务编码" rules={[{ required: true, message: '请输入职务编码!' }, {max: 20, message: '职务编码过长!'}]}/>
        <ProFormText  name="name" label="职务名称" rules={[{ required: true, message: '请输入职务名称!' }, {max: 20, message: '职务名称过长!'}]}/>
      </ProForm>
    </Modal>
  );
};

export default connect(({ SystemDutyModel }) => ({
  SystemDutyModel
}))(SystemDutyForm);
